<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link rel="stylesheet/less" media="screen" href="@{'/public/stylesheets/less/bootstrap.less'}">
    <link rel="stylesheet/less" media="screen" href="@{'/public/stylesheets/less/vv.less'}">
    <script src="@{'/public/javascripts/less-1.1.5.min.js'}" type="text/javascript" charset="UTF-8"></script>
    <script src="@{'/public/javascripts/jquery-1.7.min.js'}" type="text/javascript" charset="UTF-8"></script>
    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
      }
      .container > footer p {
        text-align: center; /* center align it with the container */
      }
      .container {
        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
      }

      /* The white background content wrapper */
      .container > .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      /* Page header tweaks */
      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }

      /* Styles you shouldn't keep as they are for displaying this base example only */
      .content .span10,
      .content .span4 {
        min-height: 500px;
      }
      /* Give a quick and non-cross-browser friendly divider */
      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var geocoder = new google.maps.Geocoder();
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(success, error);
	} else {
		error('not supported');
	}

	function success(position) {
		var latitude = position.coords.latitude;
		var longitude = position.coords.longitude;
		var latLong = new google.maps.LatLng(latitude, longitude);
		console.log(latLong.toString());
		geocoder.geocode({
			'location' : latLong,
			'region' : 'BR'
		}, function(results, status) {
			getAddress(results, status);
		});
	}

	function error(message) {
		alert(message);
	}
	
	function codeAddress() {
		var cep = document.getElementById("cep").value;
		geocoder.geocode({
			'address' : cep,
			'region' : 'BR'
		}, function(results, status) {
			getAddress(results, status);
		});
	}

	function getAddress(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			var cidade;
			var uf;
			var pais;
			var cep;
			for (i in results[0].address_components) {
				var ac = results[0].address_components[i];
				for (j in ac.types) {
					var type = ac.types[j];
					if(type == 'locality'){
						cidade = ac.long_name;
					} else if(type == 'administrative_area_level_1') {
						uf = ac.short_name;
					} else if(type == 'country') {
						pais = ac.short_name;
					} else if(type == 'postal_code') {
						cep = ac.short_name;
					}
				}
			}
			if(pais == 'BR') {
				$("#cep").attr('value', cep);
				$("#cidade").attr('value', cidade);
				$("#uf").attr('value', uf);
				$("#cidade_span").text(cidade);
				$("#uf_span").text(uf);
			} else {
				$("#cidade").attr('value', '');
				$("#uf").attr('value', '');
			}
			
		} else {
			//alert("Geocode was not successful for the following reason: " + status);
		}
	}
	
	function cepEntered(e) {
	    if (e.keyCode == 13) {
	    	codeAddress();
	    	return false;
	    }
	}
</script>
    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="#">Voto Vivo!</a>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="content">
        <div class="page-header">
          <h1>Confirme seus dados <small></small></h1>
        </div>
        <div class="row">
          <div class="span4">
		      <ul class="media-grid">
		        <li>
		          <a href="#">
		            <img class="thumbnail" src="${eleitor.foto}?type=large" alt="">
		          </a>
		        </li>
		      </ul>
          </div>
          <div class="span10">
#{form @Application.escolhePoliticos() , id:'configuraLocalizacaoForm'}
<fieldset>
          <div class="clearfix">
            <label for="cep">CEP</label>
            <div class="input">
              <input class="span2" id="cep" name="eleitor.cep" size="8" type="text" onkeypress="return cepEntered(event)">
              <input type="button" class="btn success" value="Carregar Endereço" onclick="codeAddress()">
            </div>
          </div><!-- /clearfix -->
		  <div class="clearfix">
            <label>Cidade</label>
            <div class="input">
              <span class="uneditable-input" id="cidade_span"></span>
            </div>
          </div>
          <div class="clearfix">
            <label>UF</label>
            <div class="input">
              <span class="uneditable-input" id="uf_span"></span>
            </div>
          </div>
		   <div class="clearfix">
				<label for="nome">Nome</label>
				<div class="input"><input class="large" id="nome" name="eleitor.nome" type="text" value="${eleitor.nome}"></div>
			</div>
			<div class="clearfix">
				<label>Data de Nascimento</label>
				<div class="input"><input class="small" id="dataNascimento" name="eleitor.dataNascimento" type="text" value="${eleitor.dataNascimento}"></div>
		    </div>
		    <div class="clearfix">
				<label for="genero">Sexo</label>
				<div class="input"><input class="small" id="genero" name="eleitor.genero" type="text" value="${eleitor.genero}"></div>
			</div>
		    <div class="clearfix">
				<label for="email">Email</label>
				<div class="input"><input class="large" id="email" name="eleitor.email" type="text" value="${eleitor.email}"></div>
			</div>
		    <div class="clearfix">
				<div class="input">
				<p>
					<input class="btn primary medium proximo" type="submit" value="Próximo">
				</p>
				</div>
			</div>
			
        </fieldset>
        
<input id="cidade" name="eleitor.cidade" type="hidden" value="">
<input id="uf" name="eleitor.uf" type="hidden" value="">
<input id="pais" name="eleitor.pais" type="hidden" value="Brasil">
<input id="id" name="eleitor.id" type="hidden" value="${eleitor.id}">
        
#{/form}
          </div>
        </div>
      </div>

      <footer>
        <p>&copy; VotoVivo 2011</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>
